<template>
  <div class="template-manage-page">
    <el-card>
      <template #header>
        <div class="header-bar">
          <span>模板管理</span>
          <el-button type="primary" size="small" @click="openDialog()">新建模板</el-button>
        </div>
      </template>

      <el-table :data="templateList" border style="margin-bottom: 20px;">
        <el-table-column prop="name" label="模板名称" />
        <el-table-column prop="type" label="模板类型" />
        <el-table-column prop="usage" label="使用次数" />
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-tag :type="row.status === 'enabled' ? 'success' : 'info'">
              {{ row.status === 'enabled' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template #default="{ row }">
            <el-button size="small" @click="openDialog(row)">编辑</el-button>
            <el-button size="small" type="warning" @click="toggleStatus(row)">
              {{ row.status === 'enabled' ? '停用' : '启用' }}
            </el-button>
            <el-button size="small" type="danger" @click="removeTemplate(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


    </el-card>

    <!-- 新建/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" :title="form.id ? '编辑模板' : '新建模板'" width="400px">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name" placeholder="请输入模板名称" />
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="form.type" placeholder="请选择类型">
            <el-option label="表格模板" value="表格模板" />
            <el-option label="报告模板" value="报告模板" />
            <el-option label="流程模板" value="流程模板" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const dialogVisible = ref(false)
const form = ref({})

const templateList = ref([
  { id: 1, name: '标准分析报告', type: '报告模板', usage: 28, status: 'enabled' },
  { id: 2, name: '客户登记表', type: '表格模板', usage: 65, status: 'disabled' },
  { id: 3, name: '年度流程总览', type: '流程模板', usage: 12, status: 'enabled' },
  { id: 4, name: '产品导入模板', type: '表格模板', usage: 40, status: 'enabled' },
  { id: 5, name: '简易项目流程', type: '流程模板', usage: 18, status: 'disabled' },
  { id: 6, name: '客户回访记录', type: '报告模板', usage: 33, status: 'enabled' },
  { id: 7, name: '供应商清单模板', type: '表格模板', usage: 22, status: 'enabled' },
  { id: 8, name: '项目预算模板', type: '报告模板', usage: 47, status: 'disabled' },
  { id: 9, name: '会议纪要表', type: '表格模板', usage: 55, status: 'enabled' },
  { id: 10, name: '生产调度流程', type: '流程模板', usage: 19, status: 'enabled' }
])


function openDialog(row = null) {
  form.value = row ? { ...row } : { id: null, name: '', type: '', usage: 0, status: 'enabled' }
  dialogVisible.value = true
}

function submitForm() {
  if (form.value.id) {
    const index = templateList.value.findIndex(t => t.id === form.value.id)
    if (index !== -1) templateList.value[index] = { ...form.value }
  } else {
    form.value.id = Date.now()
    templateList.value.push({ ...form.value })
  }
  dialogVisible.value = false
}

function toggleStatus(row) {
  row.status = row.status === 'enabled' ? 'disabled' : 'enabled'
}

function removeTemplate(row) {
  templateList.value = templateList.value.filter(t => t.id !== row.id)
}
</script>

<style scoped>
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
